import React, { useEffect, useState } from "react";
import { Card } from "antd";
import api_read from "@/api/blog/read";
import api_blog from "@/api/blog/blog";
import api_share from "@/api/blog/share";

import "./index.scss";
import PieChart from "@/components/echarts/pieChart";
import BarChart from "@/components/echarts/barChart";

import { getArrFromCol } from '@/utils/common'
export default function Index() {
    const [blog_X_data, set_blog_X_data] = useState([])
    const [blog_S_data, set_blog_S_data] = useState([])
    const [blog_X_other, set_blog_S_other] = useState({})
    const [share_S_data, set_share_S_data] = useState([])
    const [home, setHome] = useState(0)
    const [share, setShare] = useState(0)
    const [read, setRead] = useState(0)


    useEffect(() => {
        console.log('bbbbb',process.env)
        getRead();
        setBlogOpt()
        setShareOpt()
    }, []);

    //获取阅读次数
    const getRead = async () => {
        const res = await api_read.getRead();
        let home = res.data.find(item => item.path === 'home')?.number
        let share = res.data.find(item => item.path === 'share')?.number
        let read = res.data.find(item => item.path === 'read')?.number
        setHome(home)
        setShare(share)
        setRead(read)
    };
    //设置博客option
    const setBlogOpt = async () => {
        const res = await api_blog.getlist();
        const list = res.data.slice(0, 10)
        list.sort((a, b) => {
            return b.readNum - a.readNum
        })
        let blog_X_data = getArrFromCol(list, 'title')
        let blog_S_data = getArrFromCol(list, 'readNum')
        let blog_S_data_color = blog_S_data.map((item) => {
            return {
                value: item,
                itemStyle: {
                    color: {
                        x: 0, y: 0, x2: 0, y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: '#00C6FB', // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: '#005BEA', // 100% 处的颜色
                            },
                        ],
                    },
                },
            };
        })
        const axisLabel = { interval: 0, rotate: -25 }
        set_blog_X_data(blog_X_data)
        set_blog_S_data(blog_S_data_color)
        set_blog_S_other({ axisLabel })
    };
    //设置分享option
    const setShareOpt = async () => {
        const res = await api_share.getlist();
        let S_data = res.data.map((item) => {
            return { value: item.readNum, name: item.title }
        })
        set_share_S_data(S_data)
    }
    return (
        <div>
            <Card title="空间访问">
                <div className="over-warp">
                    <div className="over-item"></div>
                    <div className="over-item">
                        <div className="title">博客阅读量</div>
                        <div className="num">{read}</div>
                    </div>
                    <div className="over-item line"></div>
                    <div className="over-item">
                        <div className="title">空间访问量</div>
                        <div className="num">{home}</div>
                    </div>
                    <div className="over-item line"></div>
                    <div className="over-item">
                        <div className="title">分享点击量</div>
                        <div className="num">{share}</div>
                    </div>
                    <div className="over-item"></div>
                </div>
            </Card>

            <div className="charts-warp">
                <div className="charts-warp-item">
                    <Card title="博客阅读">
                        <BarChart X_data={blog_X_data} S_data={blog_S_data} X_other={blog_X_other} height='500px' />
                    </Card>
                </div>
                <div className="charts-warp-item">
                    <Card title="分享工具">
                        <PieChart S_data={share_S_data} height='500px' />
                    </Card>
                </div>

            </div>

        </div>
    );
}
